<template>
  <div class="pdf">
    <div class="container" id="container">
      <div style="padding: 20px">
        <p>
          这里开源两个flutter基础类app框架，你只需要专注于页面的撰写，无需担心整体框架的一个问题。。。
        </p>
        <p>flutter_cupertino_base_app 注：</p>
        <p>这个项目风格是cupertino风格的，也就是ios风格基础app</p>
        <p>地址：https://gitee.com/onlymry/flutter_cupertino_base_app.git</p>
        <p>flutter_material_base_app 注：</p>
        <p>这个项目风格是material风格的，也就是Android风格基础app</p>
        <p>
          地址：https://gitee.com/onlymry/flutter_material_base_app.git 预览：
        </p>
      </div>
    </div>
    <div class="btn">
      <a-button-group>
        <a-button type="primary" @click="htmlToPdf">保存PDF</a-button>
      </a-button-group>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { jsPDF } from "jspdf";
import htmlToCanvas from "html2canvas";

@Component({
  components: {},
})
export default class Pdf extends Vue {
  private jspdf: any = null;
  constructor() {
    super();
  }
  public mounted() {
    console.log(this.jspdf);
  }
  public htmlToPdf() {
    if (!this.jspdf) {
      this.jspdf = new jsPDF();
      let dom: any = document.getElementById("container");
      htmlToCanvas(dom).then((canvas) => {
        let url = canvas.toDataURL("image/png", 1);
        this.jspdf.addImage(url, "png", 0, 0);
        this.jspdf.save(`export${parseInt((Math.random() * 100000).toString())}.pdf`);
        this.jspdf = null;
      });
    }
  }
}
</script>
<style lang="less" scoped>
.pdf {
  padding: 20px;
}
</style>